<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包裹中心</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <!-- <link rel="stylesheet" href="../../css/shangpinguanli/shangpinliebiao.css"> -->
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/wuliuguanli/baoguozhongxin.js"></script>
</head>
<style>
    /* *{
        margin: 0;
        padding: 0;
    } */

    body {
        background-color: #F2F2F2;
    }

    .container {
        width: 1670px;
        background-color: white;
    }

    .clear::after {
        content: '';
        display: block;
        clear: both;
    }

    #head {
        /* width: 1670px; */
        /* height: 160px;
        line-height: 160px; */
        margin-top: 20px;
        position: relative;

    }

    .sousuo,
    .chongzhi {
        border: none;
        height: 40px;
        line-height: 40px;
        /* padding: 0; */
        width: 80px;
        text-align: center;
        border-radius: 4px;
    }

    .sousuo {
        position: absolute;
        top: 30px;
        left: 40px;
        background-color: #0099FF;
        color: white;
    }

    .chongzhi {
        position: absolute;
        top: 30px;
        left: 150px;
    }

    .drop_down {
        width: 255px;
        height: 40px;
        outline: none;
    }

    /* 发货人 */
    .shouhuoren {
        margin: 0;
        padding: 0;
    }

    #head>div:nth-child(2)>div:nth-child(1) {
        padding-left: 0;
    }

    #head>div:nth-child(2)>div>div:nth-child(3) {
        text-align: right;
        padding-right: 0;
    }

    #head>div:nth-child(2)>div>div:nth-child(2) {
        text-align: right;
        /* padding-left: 22px; */
        padding-right: 10px;
    }

    #head>div:nth-child(2)>div>div:nth-child(4) {
        text-align: right;
        /* padding-right: 10px; */
    }

    #head>div:nth-child(1) {
        padding-left: 10px;
    }

    #head>div:nth-child(2) {
        padding-left: 10px;
    }

    /* .zhuangtai {
        width: 140px;
        outline: none;
        height: 35px;
    } */

    /* 收货人姓名 */
    .xinxi input {
        width: 140px;
        outline: none;
        height: 35px;
    }

    #head>div:nth-child(1) {
        margin-top: 40px;
    }

    #head>div:nth-child(2) {
        margin-top: 20px;
        margin-bottom: 20px;
    }


    #centent {
        /* width: 100%; */
        background-color: white;
        margin-top: 20px;
        margin-bottom: 80px;
    }

    #centent>div:nth-child(1)>div:nth-child(1) {
        background-color: rgb(221, 217, 217);
        padding-left: 0;
        margin-bottom: 30px;
    }

    #ul {
        list-style: none;
        margin: 0;
        padding: 0;

    }

    #ul li:nth-child(1) {
        background-color: white;
        color: #0099FF;
    }

    #ul li {
        float: left;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-top: #0099FF 1px solid;
        margin-right: 10px;
    }

    .shujuliebiao {
        text-align: center;
        height: 40px;
        line-height: 40px;
    }

    .shujuliebiao button {
        border: #d6d2d2 1px solid;
        background-color: #0099FF;
        color: white;
    }


    .quanxuan {
        padding-left: 8px;
        font-size: 15px;
    }

    .quanxuan>span {
        text-align: justify;
        margin-left: 10px;
        font-size: 15px;
    }

    #xiala>select {
        border: none;
        background-color: #F2F2F2;
        width: 80px;
        /* font-size: 12px; */
        text-align: center;
    }

    #xiala>select>option {
        border: none;
        background-color: #0099FF;
        width: 80px;
        /* font-size: 12px; */
        text-align: center;
        /* margin-top: 10px; */
    }

    .you {
        text-align: right;
    }

    select {
        font-size: 12px;
    }

    input {
        font-size: 12px;
    }

    #tankuang {
        position: absolute;
        top: 50px;
        left: 400px;
        width: 600px;
        height: 500px;
        font-size: 12px;
        overflow: hidden;
        background-color: white;
        position: fixed;
        display: none;
    }

    #tankuang>div:nth-child(1) {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        border-bottom: solid #999797 1px;
        width: 614px;
        margin-bottom: 10px;
        padding-left: 10px;
    }

    #tankuang>div:nth-child(1)>div:nth-child(2) {
        text-align: center;
    }

    .kong {
        margin-left: -14px;
        border-left: solid #999797 1px;
        height: 25px;
        width: 10px;
        /* padding-left: 10px; */
    }

    .guanbi button {
        width: 100px;
        height: 40px;
        border: #0099FF 1px solid;
        color: #0099FF;
    }

    .guanbi {
        text-align: center;
        cursor: pointer;
    }

    .dianji {
        cursor: pointer;
    }
</style>

<body>

    <div id="head" class="container">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        发货时间&nbsp;<input type="date" placeholder="" class="drop_down" id="drop_down_one">
                    </div>
                    <div class="col-md-3 col-xs-3 ">
                        包裹状态
                        <select class="drop_down" id="drop_down_two">
                            <option value="">请选择包裹状态</option>
                            <option value="已发货未揽收">已发货未揽收</option>
                            <option value="已揽件未中转">已揽件未中转</option>
                            <option value="已中转未派件">已中转未派件</option>
                            <option value="已派件未签收">已派件未签收</option>
                            <option value="已签收">已签收</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3 ">
                        处理状态
                        <select class="drop_down" id="drop_down_three">
                            <option value="">请选择处理状态</option>
                            <option value="未处理">未处理</option>
                            <option value="已处理">已处理</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        快递公司
                        <select class="drop_down" id="drop_down_four">
                            <option value="">请选择快递公司</option>
                            <option value="顺丰">顺丰</option>
                            <option value="中通">中通</option>
                            <option value="圆通">圆通</option>
                            <option value="申通">申通</option>
                            <option value="汇通">汇通</option>
                            <option value="韵达">韵达</option>
                            <option value="邮政">邮政</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-2">
                <button class=" sousuo"><span class="iconfont icon-sousuo ">搜索</span></button>
                <button class="chongzhi"><span class="iconfont icon-shuaxin">重置</span></button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="col-md-3 col-xs-3 shouhuoren">
                    收货人姓名&nbsp;<input type="text" placeholder="收货人姓名" class="drop_down" id="drop_down_xingming">
                </div>
                <div class="col-md-3 col-xs-3">
                    手机号&nbsp;<input type="text" placeholder="手机号" class="drop_down" id="drop_down_shoujihao">
                </div>
                <div class="col-md-3 col-xs-3">
                    订单号&nbsp;<input type="text" placeholder="订单号" class="drop_down" id="drop_down_dingdanhao">
                </div>
                <div class="col-md-3 col-xs-3 shouhuoren">
                    快递单号&nbsp;<input type="text" placeholder="快递单号" class="drop_down" id="drop_down_kuaididan" value="">
                </div>
            </div>
        </div>
    </div>

    <div id="centent" class="container">
        <div class="row">
            <div class="col-md-12 col-xs-24">
                <ul id="ul" class="clear">
                    <li>全部</li>
                    <li>揽收异常</li>
                    <li>运转异常</li>
                    <li>派签异常</li>
                    <li>无异常</li>
                </ul>
            </div>
            <div class="row shujuliebiao">
                <div class="col-md-2 col-xs-2">
                    <span class="iconfont icon-shujukuliebiao">数据列表</span>
                </div>
                <button class="col-md-1 col-xs-1">
                    <span class="iconfont icon-daochu">导出</span>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <table class="table">
                    <thead id="Thead">
                        <tr>
                            <th> <input type="checkbox"></th>
                            <th>快递公司</th>
                            <th>快递单号</th>
                            <th>发货时间</th>
                            <th>订单号</th>
                            <th>包裹状态</th>
                            <th>异常状态</th>
                            <th>异常时长</th>
                            <th>处理状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="Tbody">

                    </tbody>
                </table>
            </div>
            <div class="col-md-12 col-xs-12">
                <div class="quanxuan col-md-1 col-xs-1">
                    <input type="checkbox">
                    <span>全选</span>
                </div>
                <div class="col-md-5 col-xs-5 col-md-offset-5">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                        
                        </ul>
                    </nav>
                </div>
                <div id="xiala" class="col-md-1 col-xs-1">
                    <select>
                        <option value="">10条/页</option>
                        <option value="1">15条/页</option>
                        <option value="2">20条/页</option>
                        <option value="3">25条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 物流弹框 -->
    <div id="tankuang">
        <div class="row">
            <div class="col-md-2 ">快递信息</div>
            <div class="col-md-2 col-md-offset-8">
                <span class="iconfont icon-x" onclick="guanbi()"></span>
            </div>

        </div>
        <div>
            <ul>
                <li>2021-12-22 18:50:56 货物已完成配送，感谢您选择顺丰物流</li>
                <div class="kong"></div>
                <li>2021-12-22 18:18:22 货物已分配，等待配送</li>
                <div class="kong"></div>
                <li>2021-12-22 17:30:12 货物已到达【深圳保税区站】</li>
                <div class="kong"></div>
                <li>2021-12-22 16:55:35 货物已完成分拣，离开【惠州惠阳分拣中心】</li>
                <div class="kong"></div>
                <li>2021-12-22 16:38:01 货物已到达【惠州惠阳分拣中心】</li>
                <div class="kong"></div>
                <li>2021-12-22 10:15:15 货物已完成分拣，离开【杭州外单分拣中心】</li>
                <div class="kong"></div>
                <li>2021-12-22 09:50:02 货物已到达【杭州外单分拣中心】</li>
                <div class="kong"></div>
                <li>2021-12-22 09:26:33 拣货完毕，待出库交付亮亮快递公司，运单号为5302858232565</li>
                <div class="kong"></div>
                <li>2021-12-22 08:03:28 您提交了订单，请等待系统确认</li>
            </ul>
        </div>
        <div class="guanbi" onclick="guanbi()">
            <button>关闭</button>
        </div>
    </div>

    <script>
        let pagingData = arrData
        // console.log(pagingData)
        function showTable(data) {
            $('#Tbody').html('')
            // console.log(data)
            for (let i = 0; i < data.length; i++) {
                $('#Tbody').append(`
                <tr>
                    <td><input type="checkbox"></td>
                    <td><span>${data[i].id}</span></td>
                    <td>${data[i].xinxi}<span class="dianji">&nbsp;物流信息</span></td>
                    <td>${data[i].shijian}</td>
                    <td>${data[i].danhao}</td>
                    <td>${data[i].baoguo}</td>
                    <td>${data[i].yichang}</td>
                    <td>${data[i].shichang}</td>
                    <td>${data[i].chuli}</td>
                    <td>${data[i].caozuo}</td>
                </tr>
                `)
            }
            $('.dianji').click(function () {
                $('#tankuang').css({ display: 'block' })
                //  console.log($('#tankuag').css)
            })
        }
        // showTable(pagingData)
        let num = 1 //初始页
        let lengthPage //最大页数
        // 渲染页数
        function showPage(data) {
            $('.pagination').html(`    <li class="prePage">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                  
                    <li class="nextPage">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>`) //每次渲染前刷新一下渲染的内容
            lengthPage = Math.ceil(data.length / 10) //lengthPage是最大页数
            if (lengthPage <= 4) {
                for (let i = 1; i <= lengthPage; i++) {
                    $('.pagination li:last-of-type').before(`
                <li class="new_page active"><a href="#">${i}</a></li>
                            `)
                }

            } else if (lengthPage > 4) {
                for (let i = 1; i <= lengthPage; i++) {
                    $('.pagination li:last-of-type').before(`
                            <li class="new_page"><a href="#">${i}</a></li>
                            `)
                }
                $('.new_page').eq(0).addClass('active')

                $('.new_page').slice(3, lengthPage - 1).css({
                    display: 'none'
                })
                $('.new_page').eq(3).after(`<li class="new_page"><a href="#">...</a></li>`)
            }

        }
        showPage(pagingData)
        let start //每一页的起始坐标
        let checkedBoole

        function paging(num, data) { // 修改每一页显示的内容
            start = (num - 1) * 10 //每一页的起始下标为页面值减1再乘5，
            let arr = data.slice(start, start + 10)
            showTable(arr)
            $('.new_page').eq(num - 1).addClass('active')
            $('.new_page').eq(num - 1).siblings().removeClass('active')

            $('.quanxuan').click(function () { //全选按钮
                if ($(this).prop('checked') == true) {
                    $(".table_content input").prop("checked", true)
                } else {
                    $(".table_content input").prop("checked", false)
                }
            })
            $('.table_content input').click(function () { //获取checked是否为选中
                console.log($("input[checkbox='false']"));
                console.log($("input[type='checkbox']"));
                if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                    $('.shanchu').click(function () {
                        console.log($("input[checked='true']"));
                    })

                } else { //未选中的时候执行这个结果
                    checkedBoole = $(this).prop('checked')
                    $('.shanchu').click(function () {
                        console.log(11111)
                    })

                }
            })
            // console.log($('.table_content input').prop('checked'));
        }
        paging(1, pagingData)
        // 点击页数跳转到对应的页数
        $('.pagination').on('click', '.new_page', function () {
            paging($(this).text(), pagingData)
            num = parseInt($(this).text())
        })
        // 点击上一页跳转的上一页
        $('.pagination').on('click', '.prePage', function () {
            num > 1 ? num-- && paging(num, pagingData) : paging(1, pagingData)
        })
        // 点击下一页跳转的下一页
        $('.pagination').on('click', '.nextPage', function () {
            num < lengthPage ? num++ && paging(num, pagingData) : paging(lengthPage, pagingData)
        })


        let organization //获取发货时间
        $('#drop_down_one').on('focusout', $('option'), function () {
            organization = $(this)
        })

        let atState //获取包裹状态
        $('#drop_down_two').on('click', $('option'), function () {
            atState = $(this)
        })

        let characterName //获取处理状态
        $('#drop_down_three').on('click', $('option'), function () {
            characterName = $(this)
        })

        let creator //获取快递公司
        $('#drop_down_four').on('click', $('option'), function () {
            console.log($('#drop_down_four'))
            creator = $(this)
        })
        let xingming //获取收货人姓名
        $('#drop_down_xingming').on('focusout', $('option'), function () {
            xingming = $(this)
        })

        let shoujihao //获取手机号
        $('#drop_down_shoujihao').on('focusout', $('option'), function () {
            shoujihao = $(this)
        })

        let dingdanhao //获取订单号
        $('#drop_down_dingdanhao').on('focusout', $('option'), function () {
            dingdanhao = $(this)
        })

        let kuaididan //获取快递单号
        $('#drop_down_kuaididan').on('focusout', $('option'), function () {
            kuaididan = $(this)
        })
        //  showTable(pagingData)

        $('.sousuo').click(function () { //查找
            pagingData = arrData
            console.log(pagingData)
            let sousuoData
            if (organization != undefined) {
                sousuoData = pagingData.filter(item => item.shijian == organization.val())
                pagingData = sousuoData
            }
            if (atState != undefined) {
                sousuoData = pagingData.filter(item => item.baoguo == atState.val())
                pagingData = sousuoData
            }
            if (characterName != undefined) {
                sousuoData = pagingData.filter(item => item.chuli == characterName.val())
                pagingData = sousuoData
            }
            if (creator != undefined) {
                sousuoData = pagingData.filter(item => item.id == creator.val())
                pagingData = sousuoData
                console.log(creator)
            }
            if (kuaididan != undefined) {
                sousuoData = pagingData.filter(item => item.xinxi == kuaididan.val())
                pagingData = sousuoData
            }
            if (dingdanhao != undefined) {
                sousuoData = pagingData.filter(item => item.danhao == dingdanhao.val())
                pagingData = sousuoData
            }
            // paging(1, pagingData)
            showTable(pagingData)
            // console.log(pagingData[1])
        })

        $('.chongzhi').click(function () { //重置查找
            pagingData = arrData
            if (organization != undefined) {
                organization.html(`
                            <option value="">请选择快递公司</option>
                            <option value="顺丰">顺丰</option>
                            <option value="中通">中通</option>
                            <option value="圆通">圆通</option>
                            <option value="申通">申通</option>
                            <option value="汇通">汇通</option>
                            <option value="韵达">韵达</option>
                            <option value="邮政">邮政</option>
                `)
                organization = undefined
            }
            // if (atState != undefined) {
            //     atState.html(`  
            //         <option value="">请选择组织</option>
            //         <option value="启用">启用</option>
            //         <option value="禁用">禁用</option>`)
            //     atState = undefined
            // }
            if (characterName != undefined) {
                characterName.val('')
                characterName = undefined
            }
            if (creator != undefined) {
                creator.val('')
                creator = undefined
            }
            if (kuaididan != undefined) {
                kuaididan.val('')
                kuaididan = undefined
            }
            if (dingdanhao != undefined) {
                dingdanhao.val('')
                dingdanhao = undefined
            }
            paging(1, pagingData)
        })


        //点击x 关闭弹框
        function guanbi() {
            $('#tankuang').css({ display: 'none' })
        }
        //点击物流信息 弹出弹框
        $('.dianji').click(function () {
            $('#tankuang').css({ display: 'block' })
            //  console.log($('#tankuag').css)
        })
     //鼠标移入改变字体颜色
    //  $('.dianji').on('mouseover','span',function(){
    //      $('span').css({color:'#0099FF'})
    //  })

    </script>
</body>

</html>